<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../taglibs.jsp" %>
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		 <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

		<title>购物车</title>

 		<!-- Google font -->
 		<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700" rel="stylesheet">

 		<!-- Bootstrap -->
 		<link type="text/css" rel="stylesheet" href="${path}/static/front/home/css/bootstrap.min.css"/>

 		<!-- Slick -->
 		<link type="text/css" rel="stylesheet" href="${path}/static/front/home/css/slick.css"/>
 		<link type="text/css" rel="stylesheet" href="${path}/static/front/home/css/slick-theme.css"/>

 		<!-- nouislider -->
 		<link type="text/css" rel="stylesheet" href="${path}/static/front/home/css/nouislider.min.css"/>

 		<!-- Font Awesome Icon -->
 		<link rel="stylesheet" href="${path}/static/front/home/css/font-awesome.min.css">

 		<!-- Custom stlylesheet -->
 		<link type="text/css" rel="stylesheet" href="${path}/static/front/home/css/style.css"/>

		<link rel="stylesheet" type="text/css" href="${path}/static/front/css/reset.css">
		<link rel="stylesheet" type="text/css" href="${path}/static/front/css/main.css">
		
		<!-- 自建Css -->
		<link type="text/css" rel="stylesheet" href="${path}/static/front/home/css/my.css"/> 
		
		<script src="${path}/static/front/home/js/jquery.min.js"></script>
	<script src="${path}/static/front/home/js/bootstrap.min.js"></script>
	<script src="${path}/static/front/home/js/slick.min.js"></script>
	<script src="${path}/static/front/home/js/nouislider.min.js"></script>
	<script src="${path}/static/front/home/js/jquery.zoom.min.js"></script>
	<script src="${path}/static/front/home/js/main.js"></script>
	<script src="${path}/static/common/layer/layer.js"></script>
	<script src="${path}/static/common/layui/layui.js"></script>
	<script src="${path}/static/common/mylayer.js" type="text/javascript" charset="utf-8"></script>
		
 	</head>
	<body>
		<!-- HEADER -->
		<header>
			<!-- TOP HEADER -->
			<div id="top-header">
				<div class="container">
					<ul class="header-links pull-left">
						<li><a href="#"><i class="fa fa-phone"></i> 电话号码</a></li>
						<li><a href="#"><i class="fa fa-envelope-o"></i> 1228999026@email.com</a></li>
						<li><a href="#"><i class="fa fa-map-marker"></i> 山东省青岛市黄岛区</a></li>
					</ul>
					<ul class="header-links pull-right">
						<li class = "ExitUser"><a href="#"><i class="fa fa-dollar"></i>${user.username }</a></li>
						<li class = "in_user"><a href="#"><i class="fa fa-user-o"></i> 个人中心</a></li>
					</ul>
				</div>
			</div>
			<!-- /TOP HEADER -->

			<!-- MAIN HEADER -->
			
			
			<div id="header">
				<!-- container -->
				<div class="container">
					<!-- row -->
					<div class="row">
						<!-- LOGO -->
						<div class="col-md-3">
							<div class="header-logo">
								<a href="${path}/home/home.shtml" class="logo">
									<img src="${path}/static/front/home/img/logo.png" alt="">
								</a>
							</div>
						</div>
						<!-- /LOGO -->

						<!-- SEARCH BAR -->
						<div class="col-md-6">
							<div class="header-search">
								<form action="${path}/selectStore/getSelectStorePage.shtml" method="get">
									<select class="input-select">
										<option value="0">商品名</option>
									</select>
									<input class="input" name = "name" placeholder="根据商品名搜索" >
									<button class="search-btn" id="selectStore">搜索商品</button>
								</form>
							</div>
						</div>
						<!-- /SEARCH BAR -->

						<!-- ACCOUNT -->
						<div class="col-md-3 clearfix">
							<div class="header-ctn">
								<!-- Wishlist -->
								<div>
									<a href="#">
										<i class="fa fa-heart-o"></i>
										<span>我喜欢的</span>
										<div class="qty">2</div>
									</a>
								</div>
								<!-- /Wishlist -->

								<!-- Cart -->
								<div class="dropdown">
									<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true" id = "dropDown">
										<i class="fa fa-shopping-cart"></i>
										<span>购物车</span>
										<div class="qty" id="cartCount"></div>
									</a>
									<div class="cart-dropdown">
										<div class="cart-list" >
											<div class="product-widget" id = "productWidget">
												<div>登录后可查看您的购物车概览</div>
											</div>
										</div>
										<div class="cart-btns">
											<a class = "login_cart" href="#">登录</a>
											<a class = "in_cart" href="#" >我的购物车 <i class="fa fa-arrow-circle-right"></i></a>
										</div>
									</div>
								</div>
								<!-- /Cart -->

								
							</div>
						</div>
						<!-- /ACCOUNT -->
					</div>
					<!-- row -->
				</div>
				<!-- container -->
			</div>
			<!-- /MAIN HEADER -->
		</header>
		<!-- /HEADER -->

		<!-- NAVIGATION -->
		<nav id="navigation" >
			<!-- container -->
			<div class="container" style = "margin:0 auto;">
				<!-- responsive-nav -->
				<div id="responsive-nav" >
					<!-- NAV -->
					<ul class="main-nav nav navbar-nav Category1" >
						<c:forEach items="${topCategoryList}" var="topCategory"> 
							<li style = "padding = 5px">
								<a id = "Category1A" >${topCategory.name}</a>
								<c:forEach items="${secondCategoryList}" var="secondCategory"> 
								<c:if test="${secondCategory.parentId==topCategory.id}">
									<ul class ="Category2">
										<li id = "Category2Li">
											<a id="Category2A" href="${path}/store/getStorePage.shtml?categoryId=${secondCategory.id}" >${secondCategory.name}</a>
										</li>
									</ul>
								</c:if>
							</c:forEach>
							</li>
						</c:forEach>
					</ul>
					<!-- /NAV -->
				</div>
				<!-- /responsive-nav -->
			</div>
			<!-- /container -->
		</nav>
		<!-- /NAVIGATION -->

		

	<div class="total_count">全部商品<em class="countNum">2</em>件</div>	
	<ul class="cart_list_th clearfix">
		<li class="col01">商品名称</li>
		<li class="col02">商品单位</li>
		<li class="col03">商品价格</li>
		<li class="col04">数量</li>
		<li class="col05">小计</li>
		<li class="col06">操作</li>
	</ul>
<%-- ${list} --%>
	<c:forEach items="${list}" var="cart">
		<ul id="cartItem${cart.id}" class="cart_list_td clearfix">
			<c:if test="${cart.checked==1}">
				<li class="col01"><input id="checkbox${cart.id}"  name="selectCheckbox" onclick="updateCheckStatus(${cart.id})" type="checkbox" name="" checked="true"></li>
			</c:if>
			<c:if test="${cart.checked==0}">
				<li class="col01"><input id="checkbox${cart.id}" name="selectCheckbox" onclick="updateCheckStatus(${cart.id})" type="checkbox" name=""></li>
			</c:if>
			<li class="col02"><img src="${cart.product.mainImageFullUrl}"></li>
			<li class="col03"><a href = "${path}/product/product.shtml?id=${cart.product.id}&categoryId=${cart.product.categoryId}">${cart.product.name}</a></li>
			<li class="col04">件</li>
			<li class="col05">${cart.product.price}元</li>
			<li class="col06">
				<div class="num_add">
					<a onclick="updateQuantity(${cart.id},1,${cart.product.price})" href="javascript:;" class="add fl">+</a>
					<input id="num${cart.id}" type="text" class="num_show fl count" value="${cart.quantity}">	
					<a onclick="updateQuantity(${cart.id},-1,${cart.product.price})" href="javascript:;" class="minus fl">-</a>	
				</div>
			</li>
			<li id="cartItemTotalPrice${cart.id}" class="col07">${cart.product.price*cart.quantity}元</li>
			<li class="col08"><a onclick="deleteById(${cart.id})" href="javascript:;">删除</a></li>
		</ul>
	</c:forEach>

	<ul class="settlements">
		<li class="col01"><input type="checkbox" name="" checked=""></li>
		<li class="col02">全选</li>
		<li class="col03">合计(不含运费)：<span>¥</span><em><span id="totalPrice">0</span></em><br>共选中<b class="CheckNum">0</b>种商品</li>
		<li class="col04"><a href="${path}/order/getOrderConfirmPage.shtml">去结算</a></li>
	</ul>
	

		<!-- SECTION -->
		<div class="section">
			<!-- container -->
			<div class="container">
				<!-- row -->
				<div class="row">
				</div>
				<!-- /row -->
			</div>
			<!-- /container -->
		</div>
		<!-- /SECTION -->
		<!-- FOOTER -->
		<footer id="footer">
			<!-- top footer -->
			<div class="section">
				<!-- container -->
				<div class="container">
					<!-- row -->
					<div class="row">
						<div class="col-md-3 col-xs-6">
							<div class="footer">
								<h3 class="footer-title">进入后台管理</h3>
								<a href="${path}/user/getLoginListPage.action""><i class="fa fa-envelope-o"></i>需要相应权限才可进入</a>
							</div>
						</div>

					</div>
					<!-- /row -->
				</div>
				<!-- /container -->
			</div>
			<!-- /top footer -->
		</footer>
		<!-- /FOOTER -->
	
	<!-- 登录框 -->
	<div id="loginFrom" class="login_form fr" style="display: none">
		<div class="login_title clearfix">
			<h1>用户登录</h1>
			<a href="#">立即注册</a>
		</div>
		<div class="form_input">
			<form id="form">
				<input type="text" name="username" class="name_input"
					placeholder="请输入用户名">
				<div class="user_error">输入错误</div>
				<input type="password" name="password" class="pass_input"
					placeholder="请输入密码">
				<div class="pwd_error">输入错误</div>
				<div class="more_input clearfix">
					<input type="checkbox" name=""> <label>记住用户名</label> <a
						href="#">忘记密码</a>
				</div>
			</form>
			<input type="button" name="" value="登录" class="input_submit"
				onclick="submitForm()">
		</div>
	</div>




	<script type="text/javascript">
	function suggestBtn(){
		// 加入购物车之前首先要判断有没有登录
		// 1、如果没有登录那首先要登录
		// 2、如果已经登录将商品插入购物车表，成功后跳转到购物车界面
		// User user = (User)sesstion.getAttribute("user");
		var user = "${user}";
		var suggestText = $("input:text[name='suggest']").val();
		
		if (user == "") {// 这个用户没有登录,弹出登录框
			layer.open({
				type : 1,
				title : "登录",
				offset : "50px",
				area : [ "370px", "420px" ],
				content : $("#loginFrom")
			});
		} else {// 这个用户已经登录，将商品插入购物车表，成功后跳转到购物车界面
			$.post(
					"${path}/home/suggest.shtml",
					{
					 "suggestText":suggestText, 
					},
					function(result) {
						if(result.success) {
							// 如果插入成功，跳转到购物车列表界面
							mylayer.successMsg(result.msg);
						} else {
							mylayer.errorMsg(result.msg);
						}
					},
					"json"
				);
				
			}
	}
	
	$("#dropDown").on(
			"click",
			function(){
				var user = "${user}";
				var name = "${user.username}";
				if (user == "") {// 这个用户没有登录,弹出登录框
					mylayer.errorMsg("您尚未登录");
				} else {// 这个用户已经登录，将商品插入购物车表，成功后跳转到购物车界面
					$.post(
							"${path}/store/selectUserCart.shtml",
							 {
								"userId" : "${user.id}"
							  }, 
							  function(listUC) {
									console.log(listUC);
									var html = "<div class='product-widget' ><div class='product-img'><img src='"+listUC[0].product.mainImageFullUrl+"' alt=''></div><div class='product-body'><h3 class='product-name'><a href='${path}/product/product.shtml?id="+ listUC[0].product.id +"&categoryId="+ listUC[0].product.categoryId +"' >"+listUC[0].product.name+"</a></h3></br><h4 class='product-price'>共有："+listUC[0].quantity+" 件</h4><h4 class='product-price'>商品单价为：$"+listUC[0].product.price+ "</h4></div><button class='delete'><i class='fa fa-close'></i></button></div>"
									for(var i = 1; i < listUC.length; i++) {
										html += "<div class='product-widget' ><div class='product-img'><img src='"+listUC[i].product.mainImageFullUrl+"' alt=''></div><div class='product-body'><h3 class='product-name'><a href='${path}/product/product.shtml?id="+ listUC[i].product.id +"&categoryId="+ listUC[i].product.categoryId +"' >"+listUC[i].product.name+"</a></h3></br><h4 class='product-price'>共有："+listUC[i].quantity+" 件</h4><h4 class='product-price'>商品单价为：$"+listUC[i].product.price+ "</h4></div><button class='delete'><i class='fa fa-close'></i></button></div>"
									}
									$("#productWidget").html(html); // innerHtml
									$("#cartCount").html(i);
							  	},
							"json"
						);
				}
			}
		);
	
		$(".in_cart").on(
				"click",
				function() {
					// 加入购物车之前首先要判断有没有登录
					// 1、如果没有登录那首先要登录
					// 2、如果已经登录将商品插入购物车表，成功后跳转到购物车界面
					// User user = (User)sesstion.getAttribute("user");
					var user = "${user}";
					var userName = "${user.username}";
					if (user == "") {// 这个用户没有登录,弹出登录框
						layer.open({
							type : 1,
							title : "登录",
							offset : "50px",
							area : [ "370px", "420px" ],
							content : $("#loginFrom")
						});
					} else {// 这个用户已经登录，将商品插入购物车表，成功后跳转到购物车界面
						mylayer.successMsg("您已在购物车页面");
					}
					});
		
		$(".in_user").on(
				"click",
				function() {
					// 加入购物车之前首先要判断有没有登录
					// 1、如果没有登录那首先要登录
					// 2、如果已经登录将商品插入购物车表，成功后跳转到购物车界面
					// User user = (User)sesstion.getAttribute("user");
					var user = "${user}";
					var userName = "${user.username}";
					if (user == "") {// 这个用户没有登录,弹出登录框
						layer.open({
							type : 1,
							title : "登录",
							offset : "50px",
							area : [ "370px", "420px" ],
							content : $("#loginFrom")
						});
					} else {// 这个用户已经登录，将商品插入购物车表，成功后跳转到购物车界面
						mylayer.successUrl(
								"正在进入"+userName+"的个人中心",
								"${path}/userInfo/getUserInfoPage.shtml");
							}
					});
		
		$(".login_cart").on(
				"click",
				function() {
					// 加入购物车之前首先要判断有没有登录
					// 1、如果没有登录那首先要登录
					// 2、如果已经登录将商品插入购物车表，成功后跳转到购物车界面
					// User user = (User)sesstion.getAttribute("user");
					var user = "${user}";
					var userName = "${user.username}";
					if (user == "") {// 这个用户没有登录,弹出登录框
						layer.open({
							type : 1,
							title : "登录",
							offset : "50px",
							area : [ "370px", "420px" ],
							content : $("#loginFrom")
						});
					} else {// 这个用户已经登录，将商品插入购物车表，成功后跳转到购物车界面
						mylayer.successMsg("用户"+userName+"您已登录了");
					}
					});

		$(".insert_cart").on(
				"click",
				function() {
					// 加入购物车之前首先要判断有没有登录
					// 1、如果没有登录那首先要登录
					// 2、如果已经登录将商品插入购物车表，成功后跳转到购物车界面
					// User user = (User)sesstion.getAttribute("user");
					var user = "${user}";
					console.log(user);
					if (user == "") {// 这个用户没有登录,弹出登录框
						layer.open({
							type : 1,
							title : "登录",
							offset : "50px",
							area : [ "370px", "420px" ],
							content : $("#loginFrom")
						});
					} else {// 这个用户已经登录，将商品插入购物车表，成功后跳转到购物车界面
						var productId = $("#productId").attr("name");
						console.log("productId="+productId);
						
							}
					});

		$(".ExitUser").on(
				"click",
				function() {
					//退出当前用户
					var user = "${user}";
					var userName = "${user.username}";
					if (user == "") {// 这个用户没有登录,弹出登录框
						mylayer.successMsg("您尚未登录"	);
					} else {// 这个用户已经登录，将商品插入购物车表，成功后跳转到购物车界面
						 layer.confirm('确定退出该用户么？', function(index){
					          	$.post(
					          		"${path}/userInfo/ExitUser.shtml",
					          		function(result) {
					          			if(result.success) {
					          				mylayer.successMsg(result.msg);
					          				location.href = "${path}/home/home.shtml";
					          			} else {
					          				mylayer.errorMsg(result.msg);
					          			}
					          		},
					          		"json"
					          	);
					          });
					}
				});
		
		function submitForm() {
			$.post(
				"${path}/user/login.action",
				$("#form").serialize(),
				function(result) {
					console.log(result);
					if(result.success) {
						mylayer.successMsg(result.msg);
						//当你在iframe页面关闭自身时获得当前弹出框的index索引
						var index = parent.layer.getFrameIndex(window.name);
						// js一个方法，定时器，1000毫秒之后自动执行function里面的代码
						setTimeout(function() {
							 // 关闭弹出层
							 parent.layer.close(index); 
							 // 刷新父页面
							 window.parent.location.reload();
						}, 1000);
					} else {
						mylayer.errorMsg(result.msg);
					}
				},
				"json"
			);
		}
	</script>

	<!-- 分类下拉  -->
	<script>
		$(function() {
			//监听一级菜单移入
			$(".Category1>li").mouseenter(function() {
				var $Category2 = $(this).children(".Category2");
				$Category2.stop();
				$Category2.slideDown(300);
			});

			$(".Category1>li").mouseleave(function() {
				var $Category2 = $(this).children(".Category2");
				$Category2.stop();
				$Category2.slideUp(300);
			});

		});
	</script>
	
	<script type="text/javascript">
	$(function() {
		refreshTotalPrice();
		refreshCount();
		refreshCheckCount();
	});
	
	function refreshCount(){
		//当页面加载完了计算商品的总数量
		var count = 0;
		$(".count").each(function(){
			var num = $(this).val();
			count += parseInt(num);
		});
		console.log("count = " + count);
		$(".countNum").html(count);
		
	}
	
	function refreshCheckCount(){
		//当页面加载完之后计算选中商品的总数量
		var checkboxs = $("input[name=selectCheckbox]:checked");
		var count = 0;
		var num = 0;
		$(checkboxs).each(function() {
			count += 1;			
		});
		console.log("CheckNum = " + count);
		$(".CheckNum").html(count);
	}
	
	function refreshTotalPrice() {
		// 当页面加载完了，计算选中商品的总价格
		//$("input[type=checkbox]:checked");
		var checkboxs = $("input[name=selectCheckbox]:checked");
		var totalPrice = 0;
		$(checkboxs).each(function() {
			// this代表当前正在遍历的checkbox的js dom对象
			// checkbox的id="checkbox123"
			// this.id     checkbox123
			// substr   123
			var checkboxId = this.id;
			var cartId = checkboxId.substr("checkbox".length);
			var cartItemTotalPrice = $("#cartItemTotalPrice" + cartId).html();
			totalPrice += parseFloat(cartItemTotalPrice);
		});
		$("#totalPrice").html(totalPrice);
	}
	
	function deleteById(cartId) {
		console.log("删除测试");
		layer.msg("test");
		layer.confirm("您确认要删除该商品么？", function() {
			$.post(
				"${path}/cart/deleteById.shtml",
				{"cartId":cartId},
				function(result) {
					if(result.success) {
						mylayer.successMsg(result.msg);
						// jQuery里面的remove方法，就是自己把自己从页面移除
						$("#cartItem" + cartId).remove();
						refreshTotalPrice();
						refreshCount();
						refreshCheckCount()
					} else {
						mylayer.errorMsg(result.msg);
					}
				},
				"json"
			);
		});
	}
	
		function updateQuantity(cartId,num,price) {
			$.post(
				"${path}/cart/updateQuantity.shtml",
				{"cartId":cartId,"num":num},
				function(result) {
					if(result.success) {
						mylayer.successMsg(result.msg);
						// 更新购买数量quantity
						var quantity = parseInt($("#num" + cartId).val());
						quantity = quantity + num;
						$("#num" + cartId).val(quantity);
						// 更新当前购物项item中：商品数量*商品价格的值
						var totalPrice = quantity * price;
						$("#cartItemTotalPrice" + cartId).html(totalPrice + "元");
						refreshTotalPrice();
						refreshCount();
						refreshCheckCount()
					} else {
						mylayer.errorMsg(result.msg);
					}
				},
				"json"
			);
		}
		
		function updateCheckStatus(cartId) {
			// prop:property
			var checked = $("#checkbox" + cartId).prop("checked");// true false
			if(checked) {
				checked = 1;
			} else {
				checked = 0;
			}
			
			$.post(
				"${path}/cart/updateCheckStatus.shtml",
				{"cartId":cartId,"checked":checked},
				function(result) {
					if(result.success) {
						mylayer.successMsg(result.msg);
						refreshTotalPrice();
						refreshCount();
						refreshCheckCount()
					} else {
						mylayer.errorMsg(result.msg);
					}
				},
				"json"
			);
		}
	</script>

	</body>
</html>
